<script setup lang="ts">
import { computed, ref, toRefs } from "vue";
interface ActionSheetListFaces extends Record<string, any> {
  name?: string;
  info?: string;
  color?: string;
  fontSize?: number | string;
  disabled: boolean;
  value: any;
}
interface PropsP {
  label?: string;
  value?: any;
}

interface Props {
  modelValue: any;
  visible: boolean;
  options: ActionSheetListFaces[];
  props?: PropsP;
  showCancel: boolean;
}

const prop = withDefaults(defineProps<Props>(), {
  modelValue: false,
  options: () => [],
  props: {},
  showCancel: false,
});
const { label = "name", value = "value" } = prop.props;

const emits = defineEmits([
  "update:modelValue",
  "update:visible",
  "change",
  "cancel",
]);
const { modelValue, visible } = toRefs(prop);

const visibleBle = computed({
  get() {
    return visible.value;
  },
  set(val) {
    emits("update:visible", val);
  },
});

const touchIndex = ref<number>();

const longpress = (e: number) => {
  touchIndex.value = e;
};
const touchend = () => {
  touchIndex.value = undefined;
};
const close = () => {
  visibleBle.value = false;
};
const click = (item: ActionSheetListFaces) => {
  if (item.disabled) return;
  emits("update:modelValue", item[value]);
  emits("change", item);
  close();
};
const cancel = () => {
  close();
  emits("cancel");
};
</script>

<template>
  <Popups type="bottom" v-model="visibleBle">
    <div class="action-sheet">
      <div class="action-sheet-list">
        <div
          class="action-sheet-item"
          v-for="(item, index) in options"
          :key="index"
          :class="{
            'action-sheet-item__hover': touchIndex == index,
            'action-sheet-item__disabled': item.disabled,
            active: item.value == modelValue,
          }"
          @longpress="longpress(index)"
          @click="click(item)"
          @touchend="touchend"
        >
          <div class="action-sheet-title">
            {{ item[label] }}
          </div>
          <div v-if="item.info" class="action-sheet-info">
            {{ item.info }}
          </div>
        </div>
        <div
          class="action-sheet-item close-btn"
          v-if="showCancel"
          @click="cancel"
        >
          <div class="action-sheet-title">取消</div>
        </div>
      </div>
    </div>
  </Popups>
  <div></div>
</template>

<style lang="scss" scoped>
$borderColor: #eee;
.action-sheet {
  background-color: #fff;
  &-list {
  }
  &-item {
    padding: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid $borderColor;
    &:last-child {
      border-bottom: none;
    }
    &.close-btn {
      border-top: 8px solid $borderColor;
    }
    &__hover {
      background-color: #eee;
    }
    &__disabled {
      color: rgb(192, 196, 204);
      .action-sheet-title {
        color: rgb(192, 196, 204);
      }
    }
    &.active {

      .action-sheet-title {
        color: #007aff
      }
      
    }
  }
  &-title {
    font-size: 16px;
    color: #303133;
    text-align: center;
  }
  &-info {
    font-size: 13px;
    color: #c0c4cc;
    margin-top: 10px;
    text-align: center;
  }
}
</style>
